JavaScriptモジュールアーキテクチャ：デザインパターンとベストプラクティスへのグローバルガイド

            const counterModule = (function() {
  let privateCounter = 0; // This is private

  function privateChangeBy(val) {
    privateCounter += val;
  }

  // Return an object that exposes a public API
  return {
    increment: function() {
      privateChangeBy(1);
    },
    decrement: function() {
      privateChangeBy(-1);
    },
    value: function() {
      return privateCounter;
    }
  };
})();

console.log(counterModule.value()); // 0
counterModule.increment();
console.log(counterModule.value()); // 1
console.log(counterModule.privateCounter); // undefined - it's private!

            

              
                Copy
              
            
          

            // math.js
function add(a, b) {
  return a + b;
}

module.exports = { add };

            

              
                Copy
              
            
          

            // app.js
const math = require('./math.js');
console.log(math.add(5, 3)); // 8

            

              
                Copy
              
            
          

            // app.js
define(['./math', './utils'], function(math, utils) {
  // This code runs only after math.js and utils.js are loaded
  console.log(math.add(10, 20));
  utils.log('Module loaded!');
});

            

              
                Copy
              
            
          

            // utils.js
export const PI = 3.14159;

export function double(n) {
  return n * 2;
}

// main.js
import { PI, double } from './utils.js';
console.log(double(PI));

            

              
                Copy
              
            
          

            // Logger.js
export default class Logger {
  constructor(name) {
    this.name = name;
  }
  log(message) {
    console.log(`[${this.name}] ${message}`);
  }
}

// main.js
import MyLogger from './Logger.js'; // You can name it anything
const appLogger = new MyLogger('App');
appLogger.log('Application started.');

            

              
                Copy
              
            
          

            const loginButton = document.getElementById('loginBtn');

loginButton.addEventListener('click', async () => {
  // Load the login module only when the button is clicked
  const { showLoginForm } = await import('./login-modal.js');
  showLoginForm();
});

            

              
                Copy
              
            
          

            // ConfigManager.js
class ConfigManager {
  constructor() {
    if (ConfigManager.instance) {
      return ConfigManager.instance;
    }
    this.settings = { theme: 'dark', language: 'en' };
    ConfigManager.instance = this;
  }

  get(key) {
    return this.settings[key];
  }

  set(key, value) {
    this.settings[key] = value;
  }
}

// ESM leverages its module cache to simplify the Singleton pattern.
// When this module is imported elsewhere, the same instance is always returned.
const instance = new ConfigManager();
Object.freeze(instance); // Optional: makes the instance immutable

export default instance;

// --- Usage in another file ---
// componentA.js
import config from './ConfigManager.js';
console.log(config.get('theme')); // 'dark'
config.set('theme', 'light');

// componentB.js
import config from './ConfigManager.js';
console.log(config.get('theme')); // 'light' - it's the same instance!

            

              
                Copy
              
            
          

            // apiService.js
const API_BASE_URL = 'https://api.example.com';

// Private helper function
async function _request(endpoint, options) {
  const { method, body } = options;
  const headers = {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${localStorage.getItem('authToken')}`
  };

  try {
    const response = await fetch(`${API_BASE_URL}${endpoint}`, {
      method,
      headers,
      body: body ? JSON.stringify(body) : null
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    return response.json();
  } catch (error) {
    console.error('API Service Error:', error);
    throw error; // Re-throw for the caller to handle
  }
}

// Public Facade methods
export const get = (endpoint) => _request(endpoint, { method: 'GET' });
export const post = (endpoint, body) => _request(endpoint, { method: 'POST', body });
export const put = (endpoint, body) => _request(endpoint, { method: 'PUT', body });
export const del = (endpoint) => _request(endpoint, { method: 'DELETE' });

// --- Usage in another file ---
// userProfile.js
import { get, put } from './apiService.js';

async function fetchUserData(userId) {
  const user = await get(`/users/${userId}`);
  console.log(user);
}

async function updateUserName(userId, newName) {
  await put(`/users/${userId}`, { name: newName });
}

            

              
                Copy
              
            
          

            // EventManager.js
const events = {};

export const subscribe = (eventName, callback) => {
  if (!events[eventName]) {
    events[eventName] = [];
  }
  events[eventName].push(callback);
};

export const publish = (eventName, data) => {
  if (events[eventName]) {
    events[eventName].forEach(callback => callback(data));
  }
};

export const unsubscribe = (eventName, callback) => {
  if (events[eventName]) {
    events[eventName] = events[eventName].filter(cb => cb !== callback);
  }
};

// --- Usage in different parts of the application ---

// CartModule.js
import { publish } from './EventManager.js';
export function addItemToCart(item) {
  // ... logic to add item
  publish('cart:updated', { item, action: 'add' });
}

// MiniCartUI.js
import { subscribe } from './EventManager.js';
function updateMiniCart(data) {
  console.log(`MiniCart UI: ${data.item.name} was added.`);
  // ... update the UI
}
subscribe('cart:updated', updateMiniCart);

// AnalyticsService.js
import { subscribe } from './EventManager.js';
function logCartEvent(data) {
  console.log(`Logging event: Cart updated with action '${data.action}'.`);
  // ... send data to analytics platform
}
subscribe('cart:updated', logCartEvent);

            

              
                Copy
              
            
          

            // userTypes.js
class Admin {
  constructor(name) {
    this.name = name;
    this.role = 'Admin';
  }
  getPermissions() { return ['create', 'read', 'update', 'delete']; }
}

class Editor {
  constructor(name) {
    this.name = name;
    this.role = 'Editor';
  }
  getPermissions() { return ['create', 'read', 'update']; }
}

class Viewer {
  constructor(name) {
    this.name = name;
    this.role = 'Viewer';
  }
  getPermissions() { return ['read']; }
}

// userFactory.js
export function createUser(type, name) {
  switch (type.toLowerCase()) {
    case 'admin':
      return new Admin(name);
    case 'editor':
      return new Editor(name);
    case 'viewer':
      return new Viewer(name);
    default:
      throw new Error('Invalid user type specified');
  }
}

// --- Usage ---
// main.js
import { createUser } from './userFactory.js';

const adminUser = createUser('admin', 'Alice');
const viewerUser = createUser('viewer', 'Bob');

console.log(adminUser.getPermissions()); // ['create', 'read', 'update', 'delete']
console.log(viewerUser.getPermissions()); // ['read']

            

              
                Copy
              
            
          

            /src
  /components
    - UserProfile.js
    - ProductCard.js
    - OrderSummary.js
  /services
    - userService.js
    - productService.js
    - orderService.js
  /styles
    - user.css
    - product.css

            

              
                Copy
              
            
          

            /src
  /features
    /user-profile
      - UserProfile.js
      - userService.js
      - UserProfile.css
      - index.js (exports UserProfile component)
    /product-listing
      - ProductCard.js
      - productService.js
      - ProductCard.css
      - index.js
    /order
      - OrderSummary.js
      - orderService.js
      - index.js

            

              
                Copy
              
            
          

            export { default as UserProfile } from './UserProfile.js';
export * as userService from './userService.js';

            

              
                Copy
              
            
          

            // utils.js
export function formatDate(...) { ... }
export function validateEmail(...) { ... }
export function debounce(...) { ... }
export function getCurrencySymbol(...) { ... }

            

              
                Copy
              
            
          

            // date.utils.js
export function formatDate(...) { ... }

// validation.utils.js
export function validateEmail(...) { ... }

// performance.utils.js
export function debounce(...) { ... }

// currency.utils.js
export function getCurrencySymbol(...) { ... }

            

              
                Copy
              
            
          

            // jsconfig.json
{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

            

              
                Copy